<template>
  <div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px;">
      <div class="time_item">
        <div @click="addhour" class="btn_item">
          <img src="@/assets/images/addTime.png"/>
        </div>
        <div class="box">
          <div :style="{ transform: `translateY(-${80 * activehour}px)`,transition: 'transform 0.3s ease-in-out' }">
            <div v-for="(item, index) in hourArr" :key="index" class="item" @mousewheel.prevent="handlehour">
              {{ item }}
            </div>
          </div>
        </div>
        <div @click="subhour" class="btn_item">
          <img src="@/assets/images/subTime.png"/>
        </div>
      </div>
      <div class="text">小时</div>
      <div class="time_item">
        <div @click="addminute" class="btn_item">
          <img src="@/assets/images/addTime.png"/>
        </div>
        <div class="box">
          <div :style="{ transform: `translateY(-${80 * activeminute}px)` ,transition: 'transform 0.3s ease-in-out' }">
            <div v-for="(item, index) in minuteArr" :key="index" class="item" @mousewheel.prevent="handleminute">
              {{ item }}
            </div>
          </div>
        </div>
        <div @click="subminute" class="btn_item">
          <img src="@/assets/images/subTime.png"/>
        </div>
      </div>
      <div class="text">分钟</div>
      <div class="time_item">
        <div @click="addsecond" class="btn_item">
          <img src="@/assets/images/addTime.png"/>
        </div>
        <div class="box">
          <div :style="{ transform: `translateY(-${80 * activesecond}px)` ,transition: 'transform 0.3s ease-in-out' }">
            <div v-for="(item, index) in minuteArr" :key="index" class="item" @mousewheel.prevent="handlesecond">
              {{ item }}
            </div>
          </div>
        </div>
        <div @click="subsecond" class="btn_item">
          <img src="@/assets/images/subTime.png"/>
        </div>
      </div>
      <div class="text">秒</div>
    </div>
    <div class="start_btn">
      <div  @click="startCountdown">开始计时</div>
    </div>
  </div>

</template>
<script>
export default {
  name: 'TimePicker',
  data() {
    return {
      hourArr:['00','01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
     minuteArr:['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
      activehour: 0,
      activeminute: 10,
      activesecond: 0
    }
  },
  created() {
  },
  methods: {
    addhour() {
      if (this.activehour < this.hourArr.length - 1){
        this.activehour++
      } else {
        this.activehour = 0
      }

    },
    subhour() {
      if (this.activehour > 0) {
        this.activehour--
      } else {
        this.activehour = this.hourArr.length - 1
      }
    },
    addminute() {
      if (this.activeminute < this.minuteArr.length - 1) {
        this.activeminute++
      } else {
        this.activeminute = 0
      }

    },
    subminute() {
      if (this.activeminute > 0) {
        this.activeminute--
      } else {
        this.activeminute = this.minuteArr.length - 1
      }
    },
    addsecond() {
      if (this.activesecond < this.minuteArr.length - 1) {
        this.activesecond++
      } else {
        this.activesecond = 0
      }

    },
    subsecond() {
      if (this.activesecond > 0) {
        this.activesecond--
      } else {
        this.activesecond = this.minuteArr.length - 1
      }
    },
    handlehour(event) {
      if (event.deltaY < 0) {
        this.subhour()
      } else {
        this.addhour()
      }
    },
    handleminute(event) {
      if (event.deltaY < 0) {
        this.subminute()
      } else {
        this.addminute()
      }
    },
    handlesecond(event) {
      if (event.deltaY < 0) {
        this.subsecond()
      } else {
        this.addsecond()
      }
    },
    startCountdown() {
      let hour = this.hourArr[this.activehour]*1;
      let minute = this.minuteArr[this.activeminute]*1;
      let second = this.minuteArr[this.activesecond]*1;
      this.$emit('startClock',{hour,minute,second})
    },
  }
}
</script>

<style scoped>
.time_item{
  display: flex;
  flex-direction: column;
  align-items: center;

}
.box {
  width: 80px;
  height: 80px;
  overflow: hidden;

  .item {
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 37%, #F4F4F4 49%, #EDEDED 64%, #FFFFFF 100%);
    border-radius: 8px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(203, 203, 203, 0.75), rgba(203, 203, 203, 1), rgba(255, 255, 255, 0)) 1 1;
    font-weight: 400;
    font-size: 36px;
    color: #333333;
    line-height: 80px;
    text-align: center;
  }
}
.btn_item {
  width: 43px;

  img {
    width: 43px;
  }
}
.text {
  margin-left: 4px;
  margin-right: 24px;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
}
.text:last-child {
  margin-right: 0;
}
.start_btn{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  div{
    width: 176px;
    height: 32px;
    line-height: 32px;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    background: #28B28B;
    border-radius: 8px;
  }
}
</style>
